@mixin border-radius($r) {
  -webkit-border-radius:$r;
  -moz-border-radius:$r;
  border-radius:$r;
}

@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow:$x $y $blur $color;
  -moz-box-shadow:$x $y $blur $color;
  box-shadow:$x $y $blur $color;
}

@mixin translate($x: 0, $y: 0, $z: 0) {
  -webkit-transform:translate3d($x, $y, $z);
  -moz-transform:translate($x, $y);
  -ms-transform:translate($x, $y);
  -o-transform:translate($x, $y);
  transform:translate3d($x, $y, $z);
}

@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
  -webkit-transition:$prop $duration $easing $delay;
  -moz-transition:$prop $duration $easing $delay;
  -ms-transition:$prop $duration $easing $delay;
  -o-transition:$prop $duration $easing $delay;
  transition:$prop $duration $easing $delay;
}

@mixin transform($val) {
  -webkit-transform:$val;
  -moz-transform:$val;
  -ms-transform:$val;
  -o-transform:$val;
  transform:$val;
}

#intro {
  text-align:center;
  
  h1 {
    font-size:72px;
    font-weight:normal;
    margin-bottom:8px;
    color:#000;
    text-shadow:3px 3px 3px rgba(0,0,0,.2);
  }
  
  h2 {
    font-size:32px;
    letter-spacing:2px;
    color:#999;
    font-weight:100;
    text-shadow:1px 1px 1px #fff;
  }
}

#labs, #indexeddb-nosql {
  .deck-child-current, .slide {
    visibility:visible;
    opacity:1;
  }
}

#labs.deck-child-current, #indexeddb-nosql.deck-child-current {
  position: relative;
  left: 0px;
  top: 0px;

  visibility:visible;
  opacity:1;
}

#download, #mobile-common-devices {
  > div {
    h1 {
      font-size:48px;
      font-weight:normal;
      margin-bottom:8px;
      color:#000;
      text-shadow:3px 3px 3px rgba(0,0,0,.2);
    }
    
    h1 a, h1 a:hover, h1 a:visited {
      color:#000;
      text-decoration: none;
    }

    h2 {
      font-size:32px;
      letter-spacing:2px;
      color:#999;
      font-weight:100;
      text-shadow:1px 1px 1px #fff;
    }
  }
}

#appcache-tips {
  li {
    margin-bottom: 20px;
  }
}

#indexeddb-nosql {
  > div {
    .slide.deck-current {
      color: #2c9d40;
      font-weight: bold;
    }
  }
}

article:not(.on-slide-17) {
  .index-state {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}
article:not(.on-slide-18) {
  .cursor-state {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}
article:not(.on-slide-19) {
  .result-set-state {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}
.index-state, .cursor-state, .result-set-state {
  font-weight: bold;
}

.indexeddb-keypath-state {
  font-weight: bold !important;
}

.home > article > .slide {
  text-align:left;
  
  > hgroup {
    padding-top:24px;
    margin-bottom:32px;

    h1 {
      font-size:72px;
      font-weight:normal;
      margin-bottom:8px;
      font-family: 'Paytone One', sans-serif;
      color:#000;
      text-shadow:3px 3px 3px rgba(0,0,0,.2);
    }

    h1 .amp {
      font-family: 'Neuton', sans-serif;
    }

    h2 {
      font-size:32px;
      letter-spacing:2px;
      color:#999;
      font-weight:100;
      text-shadow:1px 1px 1px #fff;
    }
  }
  
  > div {
    h1 {
      font-size:48px;
      font-weight:normal;
      margin-bottom:8px;
      color:#000;
      text-shadow:3px 3px 3px rgba(0,0,0,.2);
    }

    h2 {
      font-size:32px;
      letter-spacing:2px;
      color:#999;
      font-weight:100;
      text-shadow:1px 1px 1px #fff;
    }
    
    code {
      white-space: nowrap;
    }
    
    p, ol, ul, dl {
      font-size:24px;
      margin-bottom:20px;
      margin-top:20px;
    }
    
    li {
      margin-left: 26px;
    }
    
    dd {
      margin-left: 60px;
      margin-bottom: 24px;
    }
    
    .csstransforms & {
      padding-top: 0px;
      padding-left: 10px;
      position: absolute;
      top: 50%;
      left: 0px;
      right: 0px;

      -webkit-transform:translate(0, -50%);
      -moz-transform:translate(0, -50%);
      -ms-transform:translate(0, -50%);
      -o-transform:translate(0, -50%);
      transform:translate(0, -50%);
    }
  }
}

.smaller {
  font-size: 24px;
}

.accordion h1 {
  -webkit-transition: background-color 0.5s ease-in-out;
  -moz-transition: background-color 0.5s ease-in-out;
  -o-transition: background-color 0.5s ease-in-out;
  -ms-transition: background-color 0.5s ease-in-out;  
  transition: background-color 0.5s ease-in-out;
}
.accordion section, .accordion p {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;  
  transition: all 0.5s ease-in-out;
}

.accordion {
  margin-top:24px;
  margin-bottom:24px;
}
.accordion h1 {
  font-family: 'Droid Sans', sans-serif !important;
  font-weight: bold;
  color:black;
  line-height: 50px;
  font-size:24px !important;
  background-color: #a4a4a4;
  margin:0 !important;
  padding: 10px 10px 10px 20px;
}
.accordion section {
  overflow:hidden;
  height:220px;
}
.accordion p {
  margin:0 !important;
  padding:10px 20px !important;
  color:black;
}
.accordion section:not(.deck-current) p {
  color:#fff;
}
.accordion section:not(.deck-current) {
  height:70px;
}
.accordion section.deck-current h1 {
  background-color: #2c9d40;    
  height:50px;
}

.csstransforms.csstransitions {
  .deck-previous, .deck-before {
    opacity: 0;

    -webkit-transition: opacity 600ms ease-in-out;
    -moz-transition: opacity 600ms ease-in-out;
    -ms-transition: opacity 600ms ease-in-out;
    -o-transition: opacity 600ms ease-in-out;
    transition: opacity 600ms ease-in-out;
  }
  .deck-current {
    opacity: 1;

    -webkit-transition: opacity 600ms ease-in-out;
    -moz-transition: opacity 600ms ease-in-out;
    -ms-transition: opacity 600ms ease-in-out;
    -o-transition: opacity 600ms ease-in-out;
    transition: opacity 600ms ease-in-out;
  }
  
  #intro {
    &.deck-previous, &.deck-before {
      left:0;
      top:0;
      right:0;

      h1, h2, p {
        @include translate(-300%, 0);
      }
    }

    h1 {
      -webkit-transition: all 600ms ease-in-out;
      -moz-transition: all 600ms ease-in-out;
      -ms-transition: all 600ms ease-in-out;
      -o-transition: all 600ms ease-in-out;
      transition: all 600ms ease-in-out;
    }

    h2 {
      -webkit-transition: all 600ms ease-in-out 200ms;
      -moz-transition: all 600ms ease-in-out 200ms;
      -ms-transition: all 600ms ease-in-out 200ms;
      -o-transition: all 600ms ease-in-out 200ms;
      transition: all 600ms ease-in-out 200ms;
    }

    p {
      -webkit-transition: all 600ms ease-in-out 400ms;
      -moz-transition: all 600ms ease-in-out 400ms;
      -ms-transition: all 600ms ease-in-out 400ms;
      -o-transition: all 600ms ease-in-out 400ms;
      transition: all 600ms ease-in-out 400ms;
    }
  }
}

.pointerevents.csstransforms.csstransitions {
  .deck-current {
    z-index:auto; // um, webkit bug if z-index + transforms + transitions
  }
  
  .deck-after, .deck-before, .deck-previous, .deck-next {
    &:not(.deck-child-current) {
      pointer-events:none;
    }
  }
  
  .deck-child-current {
    .deck-before, .deck-previous {
      pointer-events:auto;
    }
  }
}

.no-pointerevents.csstransforms.csstransitions { //aka Opera
  .deck-current, .deck-child-current {
    z-index:4;
  }
}

.slide .slide {
  min-height:0;
  height:auto;
}